<template>
  <a-card class="general-card" title="最新动态" style="margin-bottom: 14px">
    <template #extra>
      <a-dropdown>
        <a-link>更多</a-link>
        <template #content>
          <a-doption>
            <a-link href="https://gitee.com/organizations/continew-admin_1/events" target="_blank" rel="noopener">
              Gitee
            </a-link>
          </a-doption>
          <a-doption>
            <a-link href="https://gitcode.com/org/continew/discussion" target="_blank" rel="noopener">GitCode</a-link>
          </a-doption>
          <a-doption>
            <a-link href="https://github.com/orgs/continew-org/discussions" target="_blank" rel="noopener">GitHub
            </a-link>
          </a-doption>
        </template>
      </a-dropdown>
    </template>
    <a-skeleton v-if="loading" :loading="loading" :animation="true">
      <a-skeleton-line :rows="10" />
    </a-skeleton>
    <div v-else>
      <a-empty v-if="dataList.length === 0">暂无动态</a-empty>
      <div v-else>
        <div
          v-for="item in dataList"
          :key="item.id"
          class="commit arco-comment"
        >
          <a-avatar :src="item.actor.avatar" :alt="item.actor.username" />
          <div>
            <div class="arco-comment-content">
              <a-link :href="item.actor.url" target="_blank">{{ item.actor.nickname || item.actor.username }}</a-link>
              在仓库
              <a-link :href="item.repo.url" target="_blank">{{ item.repo.name }}</a-link>
              中
              {{ item.type }}
            </div>
            <div class="arco-comment-datetime">{{ item.createTimeString }}</div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import axios, { type AxiosRequestConfig } from 'axios'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

// 数据接口类型定义
export interface DataItem {
  id: number
  type: string
  actor: {
    username: string
    nickname: string
    avatar: string
    url: string
  }
  repo: {
    name: string
    url: string
  }
  createTime: string
  createTimeString: string
}

// API Token
const token = 'cf4e19b979ad9a5b17072a0644fad25b' // 替换为你的 Gitee Token

const get = <T = unknown>(url: string, params?: object, config?: AxiosRequestConfig): Promise<T> => {
  return axios.request<T>({
    method: 'get',
    url,
    headers: {
      'Authorization': `token ${token}`,
      'Cache-Control': 'no-cache', // 禁用缓存
      'Pragma': 'no-cache', // 兼容性头
    },
    params,
    ...config,
  }).then((response) => response.data);
}

// 定义响应式数据
const dataList = ref<DataItem[]>([])
const loading = ref(false)

// 获取列表数据
const getDataList = async () => {
  try {
    loading.value = true
    const { data } = await get<any[]>(
      'https://gitee.com/api/v5/orgs/continew-admin_1/events', // Gitee API
    )
    // 映射数据
    dataList.value = data.map((item) => ({
      id: item.id,
      type: item.type,
      actor: {
        username: item.actor.login,
        nickname: item.actor.name,
        avatar: item.actor.avatar_url,
        url: item.actor.html_url,
      },
      repo: {
        name: item.repo.name,
        url: item.repo.html_url,
      },
      createTime: item.created_at,
      createTimeString: dayjs(new Date(item.created_at)).fromNow(),
    }))
  } catch (err) {
    console.error('API Error:', err)
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  getDataList()
})
</script>

<style scoped lang="scss">
:deep(.arco-comment:not(:first-of-type), .arco-comment-inner-comment) {
  margin-top: 10px;
}

:deep(.arco-comment:not(:last-of-type)) {
  border-bottom: 1px solid var(--color-border-1);
  padding-bottom: 10px;
}

:deep(.arco-comment-content) {
  color: var(--color-text-2);
}

:deep(.arco-comment-datetime) {
  color: var(--color-text-4);
}

.commit.arco-comment {
  margin-top: 10px;
  font-size: 12px;
  border-bottom: none;
  padding-bottom: 0;
}
</style>
